
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="layui/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="layui/layui.js"></script>

</head>

<body>
    <fieldset class="layui-elem-field">
        <legend>要求</legend>
        <div class="layui-field-box">
            1.完成基本布局；有代码注释50%以上，商品类别为优选水果、卤味熟食、饮料酒水、休闲零食四类。<br/>
            2.点击提交表单将提交的内容显示在表格的最上面;  提交后清空输入框的内容;   表单各项不允许为空;   原价，现价，数量必须为数字;<br/>
            3.奇数行背景色为白色（white);	<br/>偶数行背景灰为(#FAFAFA)；完成删除功能，点击删除，删除数据
        </div>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input goodsName">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品类别</label>
            <div class="layui-input-block">
                <select class="goodsType">
                    <option>优选水果</option>
                    <option>卤味熟食</option>
                    <option>饮料酒水</option>
                    <option>休闲零食</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品原价</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input marketPrice">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品现价</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input shopPrice">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input goodsNumber">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn">立即提交</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>商品类别</th>
                <th>商品原价</th>
                <th>商品现价</th>
                <th>商品数量</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>


    
</body>

</html>
<script>
    // 保存数据
    let data = [];
    document.querySelector('.layui-btn').onclick = function(){
        // 获取表单数据
        let goodsName = document.querySelector('.goodsName');
        let goodsType = document.querySelector('.goodsType');
        let marketPrice = document.querySelector('.marketPrice');
        let shopPrice = document.querySelector('.shopPrice');
        let goodsNumber = document.querySelector('.goodsNumber');
        // 要求数字
        let reg = /^\d+$/i;
        if(!goodsName.value || !marketPrice.value || !shopPrice.value || !goodsNumber.value){
            alert('内容必须输入')
            return false;
        }
        if(!reg.test(marketPrice.value) || !reg.test(shopPrice.value) || !reg.test(goodsNumber.value)){
            alert('输入的必须是数字')
            return false;
        }
        // 将表格的数据加入到data变量中
        data.push({
            goodsName:goodsName.value,
            goodsType:goodsType.value,
            marketPrice:marketPrice.value,
            shopPrice:shopPrice.value,
            goodsNumber:goodsNumber.value,
        })
        showData();


        return false;
    }
    // 删除功能
    document.querySelector('tbody').addEventListener('click',function(event){
        if(event.target.nodeName == 'BUTTON'){
            let index = event.target.getAttribute('data-index');
            data.splice(index,1);
            showData();
        }
    })
    function showData(){
        let html = '';
        data.forEach((item,index)=>{
            html += `<tr style="background-color:${index%2 ==1?'#FAFAFA':'white'}">
                <th>${item.goodsName}</th>
                <th>${item.goodsType}</th>
                <th>${item.marketPrice}</th>
                <th>${item.shopPrice}</th>
                <th>${item.goodsNumber}</th>
                <th><button type="button" data-index="${index}">删除</button></th>
            </tr>`
        })
        document.querySelector('tbody').innerHTML = html;
    }
</script>